<template>
  <div class="page-container">
    <!--订单信息-->
    <div class="order-detail-wrap">
      <div class="order-content">
        <el-form label-position="left" :inline="true" label-width="100px">
          <el-row style="margin-top: 10px;">
              <el-col :span="8">
                <span class="label">售后单编号：</span>
                <span class="value">{{val_data.afterSaleNo}}</span>
                </el-col>
              <el-col :span="8">
                <span class="label">售后类型：</span>
                <span class="value">{{val_data.afterSalesType}}</span>
              </el-col>
              <el-col :span="8">
                <span class="label">售后申请时间：</span>
                <span class="value">{{val_data.aftersalesApplicationTime}}</span>
              </el-col>
          </el-row>
          <el-row style="margin-top: 10px;">
              <el-col :span="8">
                <span class="label">售后单状态：</span>
                <span class="value">{{val_data.aftersalesOrderStatus}}</span>
              </el-col>
              <el-col :span="8">
                <span class="label">售后完成时间：</span>
                <span class="value">{{val_data.completeTime}}</span>
              </el-col>
              <el-col :span="8">
                <span class="label">申请人：</span>
                <span class="value">{{val_data.applyName}}</span>
              </el-col>
          </el-row>
          <el-row style="margin-top: 10px;">
              <el-col :span="8">
                <span class="label">申请来源：</span>
                <span class="value">{{val_data.applyType == 0 ? "前端申请":"后台申请"}}</span>
              </el-col>
              <el-col :span="8">
                <span class="label">销售商家：</span>
                <span class="value">{{val_data.sellers}}</span>
              </el-col>
              <el-col :span="8">
                <span class="label">销售店铺名称：</span>
                <span class="value">{{val_data.sellersName}}</span>
              </el-col>
          </el-row>
          <el-row style="margin-top: 10px;">
              <el-col :span="8">
                <span class="label">销售渠道：</span>
                <span class="value">{{val_data.saleWays}}</span>
              </el-col>
              <el-col :span="8">
                <span class="label">订单编号：</span>
                <span class="value">{{val_data.orderCode}}</span>
              </el-col>
              <el-col :span="8">
                <span class="label">订单创建时间：</span>
                <span class="value">{{val_data.orderTime}}</span>
              </el-col>
          </el-row>
          <el-row style="margin-top: 10px;">
              <el-col :span="8">
                <span class="label">订单状态：</span>
                <span class="value">{{orderStatus}}</span>
              </el-col>
              <el-col :span="8">
                <span class="label">订单类型：</span>
                <span class="value">{{orderType}}</span>
              </el-col>
              <el-col :span="8">
                <span class="label">下单会员账号：</span>
                <span class="value">{{val_data.orderMemberAccountNumber}}</span>
              </el-col>
          </el-row>
          <el-row style="margin-top: 10px;">
            <el-col :span="8">
                <span class="label">收货人手机：</span>
                <span class="value">{{val_data.receive_phone}}</span>
            </el-col>
            <el-col :span="8">
                <span class="label">收货人：</span>
                <span class="value">{{val_data.receive_linkman}}</span>
            </el-col>
            <el-col :span="8">
                <span class="label">收货人地址：</span>
                <span class="value">{{val_data.receive_detail_address}}</span>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- tab明细部分 -->
      <div class="order-tab-container">
        <el-tabs v-model="tabActive" type="card" @tab-click="handleClick">
          <!-- 售后单明细 -->
          <el-tab-pane label="售后单明细" name="first">
            <div class="goods-detail">
              <div class="tab-title">商品明细</div>
              <el-table
                :data="goodsData"
                border
                style="width: 100%">
                <el-table-column  label="商品主图" width="180">
                  <template  slot-scope="scope">
                      <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.picture"
                  :fit="fit"></el-image>
                  </template>
                  </el-table-column>
                <el-table-column prop="name" label="商品名称" width="180"></el-table-column>
                <el-table-column prop="code" label="商品编码"></el-table-column>
                <el-table-column prop="serialNumber" label="套餐编号"></el-table-column>
                <el-table-column prop="combo" label="套餐名"></el-table-column>
                <el-table-column prop="sku" label="规格属性"></el-table-column>
                <el-table-column prop="unit" label="订购单位"></el-table-column>
                <el-table-column prop="number" label="购买数量"></el-table-column>
                <el-table-column prop="price" label="	购买金额"></el-table-column>
                <el-table-column prop="applyNumber" label="售后申请数量"></el-table-column>
                <el-table-column prop="purchasePrice" label="售后商品购买金额"></el-table-column>
                <el-table-column prop="applyPrice" label="申请退款金额"></el-table-column>
                <el-table-column prop="note" label="辅料备注"></el-table-column>
              </el-table>
            </div>
            <div class="goods-detail">
              <div class="tab-title">售后申请说明</div>
              <div class="after-sale" style="text-align:left;padding-left:50px">
                <el-row style="margin-top: 10px;">
                  <el-col :span="8">
                    <span class="label">售后原因：</span>
                    <span class="value">{{this.val_data.applyReason}}</span>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 10px;">
                  <el-col :span="8">
                    <span class="label">描述申请：</span>
                    <span class="value">{{this.val_data.applyDetailReason}}</span>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 10px;">
                  <el-col :span="8">
                    <span class="label">订单号：</span>
                    <span class="value">{{this.val_data.orderNo}}</span>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="goods-detail">
              <div class="tab-title">审核</div>
              <div class="after-sale" style="text-align:left;padding-left:50px">
                <el-row style="margin-top: 10px;">
                  <el-col :span="8">
                    <span class="label">审核时间：</span>
                    <span class="value">{{this.val_data.auditTime}}</span>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 10px;">
                  <el-col :span="8">
                    <span class="label">审核结果：</span>
                    <span class="value">{{auditResult}}</span>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 10px;">
                  <el-col :span="8">
                    <span class="label">售后商品退款金额：</span>
                    <span class="value">{{this.val_data.actualRefundAmount}}</span>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 10px;">
                  <el-col :span="8">
                    <span class="label">备注：</span>
                    <span class="value">{{remarks}}</span>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-tab-pane>
          <!-- 订单支付明细 -->
          <el-tab-pane label="订单支付明细" name="second">
            <!-- 订单明细 -->
            <div class="goods-detail">
              <div class="after-sale" style="text-align:left;padding-left:50px">
                <el-row style="margin-top: 10px;">
                  <el-col :span="8">
                    <span class="label">应付金额：</span>
                    <span class="value">{{amountPayable}}</span>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 10px;">
                  <el-col :span="8">
                    <span class="label">已付金额</span>
                    <span class="value">{{amountPaid}}</span>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 10px;">
                  <el-col :span="8">
                    <span class="label">支付类型：</span>
                    <span class="value">{{payWays}}</span>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 10px;">
                  <el-col :span="8">
                    <span class="label">支付状态：</span>
                    <span class="value">{{payStatus}}</span>
                  </el-col>
                </el-row>
              </div>
            </div>
            <!-- 表格部分 -->
            <div class="goods-detail">
              <el-table
                :data="ordreData"
                border
                style="width: 100%">
                <el-table-column prop="type" label="支付方式" width="180"></el-table-column>
                <el-table-column prop="money" label="支付金额" width="180"></el-table-column>
                <el-table-column prop="time" label="支付时间"></el-table-column>
                <el-table-column prop="serialNumber" label="支付流水号"></el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <!-- 退款明细 -->
          <el-tab-pane label="退款明细" name="third">
            <!-- 订单明细 -->
            <div class="goods-detail">
              <div class="tab-title">退款信息</div>
              <div class="after-sale" style="text-align:left;padding-left:50px">
                <el-row style="margin-top: 10px;">
                  <el-col :span="8">
                    <span class="label">退款状态：</span>
                    <span class="value">{{refundStatus}}</span>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 10px;">
                  <el-col :span="8">
                    <span class="label">售后单退款金额：</span>
                    <span class="value">{{refundAmountOfAftersalesOrder}}</span>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 10px;">
                  <el-col :span="8">
                    <span class="label">售后单退款金粉金额：</span>
                    <span class="value">{{aftersalesOrderRefundAmountOfGoldPowder}}</span>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 10px;">
                  <el-col :span="8">
                    <span class="label">补偿退款金额：</span>
                    <span class="value">{{compensationRefundAmount}}</span>
                  </el-col>
                </el-row>
              </div>
            </div>
            <!-- 表格部分 -->
            <div class="goods-detail">
              <el-table
                :data="afterData"
                border
                style="width: 100%">
                <el-table-column prop="number" label="平台退款单号" width="180"></el-table-column>
                <el-table-column prop="type" label="订单退款类型" width="180"></el-table-column>
                <el-table-column prop="shape" label="退款形式"></el-table-column>
                <el-table-column prop="money" label="退款金额（元）"></el-table-column>
                <el-table-column prop="afterNumber" label="退款凭证号"></el-table-column>
                <el-table-column prop="status" label="退款状态"></el-table-column>
                <el-table-column prop="time" label="退款时间"></el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <!-- 售后单日志 -->
          <el-tab-pane label="售后单日志" name="fourth">
            <!-- 查询条件 -->
            <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="操作时间">
                <el-date-picker
                  v-model="formInline.data"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="审批人">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="ckeck">重置</el-button>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form> -->
            <!-- 表格部分 -->
            <div class="goods-detail">
              <el-table
                :data="logData"
                border
                style="width: 100%">
                <el-table-column prop="time" label="操作时间" width="180"></el-table-column>
                <el-table-column prop="operator" label="操作人" width="180"></el-table-column>
                <el-table-column prop="log" label="操作日志"></el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 返回按钮 -->
<!--    <div class="back">-->
<!--      <el-button type="primary" @click="back">返回</el-button>-->
<!--    </div>-->
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
export default {
  components: {
    PopupTreeInput,
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  props: ["val_data"],
  created(){
    //获取订单状态和类型
    let this_ = this;
    this.utils.request.queryOrderInfo({"orderNo": this.val_data.orderNo}, function (res) {
        if (res.code == "0000") {
          switch(res.data.orderStatus) {
              case 1:
                //初始化、确认收货、已完成、已关闭
                  this_.orderStatus = '初始化';
                  break;
              case 2:
                  this_.orderStatus = '确认收货';
                  break;
              case 3:
                  this_.orderStatus = '已完成';
                  break;
              case 4:
                  this_.orderStatus = '已关闭';
                  break;
              default:
                  this_.orderStatus = res.data.orderStatus;
          }

        }
    });
    //获取订单商品信息
    this.utils.request.queryOrderGoodsInfo({"orderNo": this.val_data.orderNo,"goodsId":this.val_data.goodsId}, function (res) {
        if (res.code == "0000") {
          this_.goodsData[0].picture = res.data.goodsImgUrl;
          this_.goodsData[0].name = res.data.goodsName;
          this_.goodsData[0].code = this_.val_data.productCode;
          this_.goodsData[0].serialNumber = '001';
          this_.goodsData[0].combo = '十万个为什么';
          this_.goodsData[0].sku = '全套餐';
          this_.goodsData[0].unit = '希望小学';
          this_.goodsData[0].number = res.data.goodsNum;
          this_.goodsData[0].price = this_.val_data.goodsPrice;
          this_.goodsData[0].applyNumber = this_.val_data.goodsNum;
          this_.goodsData[0].purchasePrice = '200';
          this_.goodsData[0].applyPrice = this_.val_data.returnAmount;
          this_.goodsData[0].note = this_.val_data.remark;
        }
    });


    //获取审核结果列表
    this.utils.request.getOrderAfterSaleFlowRecords({"afterSaleNo": this.val_data.afterSaleNo}, function (res) {
        if (res.code == "0000") {
          let auditResult = res.data.find(function (item, index) {
              return item.operateType == 1030 || item.operateType == 1040;
          })
          if(typeof(auditResult)!="undefined"){
            //this_.auditTime = auditResult.createTime;
            this_.auditResult = auditResult.operateType == 1030 ? '审核通过' : '审核拒绝';
            this_.remarks = auditResult.remark;
          }
          this_.logData = res.data.map((item) => {
              let logItem = {};
              logItem.time = item.createTime;
              logItem.operator = item.createName;
              logItem.log = item.remark;
              return logItem;
          });
        }
    });
    //获取订单支付信息
    this.utils.request.getOrderPay({"parentOrderNo": this.val_data.orderNo}, function (res) {
        if (res.code == "0000") {
          console.log(res);
          this_.amountPayable = res.data[0].payTotalAmount;
          this_.amountPaid = res.data[0].payTotalAmount - res.data[0].lavePayTotalAmount;
          switch(res.data[0].payType) {
              case 1:
                //网上支付.线下支付
                  this_.payWays = "网上支付";
                  break;
              case 2:
                  this_.payWays = "线下支付";
                  break;
              default:
                  this_.payWays = res.data[0].payType;
          }
          switch(res.data[0].payStatus) {
              case 1:
                //待支付、已支付、已关闭、部分支付（
                  this_.payStatus = "待支付";
                  break;
              case 2:
                  this_.payStatus = "已支付";
                  break;
              case 3:
                  this_.payStatus = "已关闭";
                  break;
              case 4:
                  this_.payStatus = "部分支付";
                  break;
              default:
                  this_.payStatus = res.data[0].payStatus;
          }
          this_.ordreData = res.data.map((item) => {
              let orderItem = {};
              orderItem.type = this_.payWays;
              orderItem.money = this_.amountPayable;
              orderItem.time = res.data[0].payTime;
              orderItem.serialNumber = res.data[0].orderPayNo;
              return orderItem;
          });
        }
    });
  },
  data() {
    return {
      tabActive: 'first',      // tab选项卡
      aftersalesOrderNumber:"R2001081645300685231",
      aftersalesType:"仅退款未发货",
      aftersalesApplicationTime:"2020-01-11 00:03:27",
      aftersaleStatus:"已完成",
      aftersalesCompletionTime:"2020-01-11 00:05:20",
      applicant:"张大龙",
      sourceOfApplication:"前台申请",
      seller:"建投自营商家",
      sellerName:"自营店铺",
      saleWays:"BBC",
      orderNumber:"200111519639879409",
      orderCreationTime:"2020-01-11 00:02:28",
      orderStatus:"已关闭",
      orderType:"无仓",
      orderMemberAccountNumber:"18706179807",
      consigneePhone:"18706179807",
      consignee:"张大龙",
      receivingAddress:"Shanghai-Shanghai City-Huangpu District-11111",
      reason:"多拍",
      applyDescription:"多拍商品，申请退货",
      orderCode:"E2020011598732455",
      auditTime:"",
      auditResult:"",
      refundAmountOfAftersaleGoods:"200",
      remarks:"",
      amountPayable:"2002",
      amountPaid:"2000",
      payWays:"网上支付",
      payStatus:"已支付",
      refundStatus:"退款完成",
      refundAmountOfAftersalesOrder:"200",
      aftersalesOrderRefundAmountOfGoldPowder:"0.00",
      compensationRefundAmount:"0.00",
      // 商品明细数据
      goodsData: [
        {
          picture: '商品主图',
          name: '儿童读物',
          code: 'UT0031',
          serialNumber: '001',
          combo: '十万个为什么',
          sku: '全套餐',
          unit: '希望小学',
          number: '200',
          price: '2000',
          applyNumber: '20',
          purchasePrice: '200',
          applyPrice: '200',
          note: '退货',
        },
      ],
      // 订单支付明细数据
      ordreData: [
        {
          timetype: '微信公众号',
          money: '200',
          time: '2020-01-11',
          serialNumber: '001',
        },
      ],
      // 退款明细数据
      afterData: [
        {
          number: 'RC20011015144807102',
          type: '仅退款',
          shape: '线上退款',
          money: '200',
          afterNumber: '202001112001110000000989	',
          status: '	已退款',
          time: '	2020-01-16 00:05:20',
        }
      ],
      // 查询条件
      formInline: {
        user: '',
        region: '',
        data: '',
      },
      //售后单日志
      logData: [
        {
          time: '2020-01-11 00:04:13',
          operator: 'superadmin',
          log: '审核通过，不需要用户寄回商品，退运费：0元，商品实退金额：1.6元',
        }
      ]
    };
  },

  methods: {
    handleClick() {
      console.log('do');
    },
    ckeck() {

    },
    back() {
      this.$emit("sendChildData")
    },
  }
};
</script>

<style scoped lang="scss">
  /deep/
  .el-tabs__header {
    padding-bottom: 0;
  }
  /* 共用布局 */
  .label {
    display: inline-block;
    width: 30%;
    text-align: right;
    font-size: 14px;
  }
  .value {
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
  }
  /* tab部分 */
  .order-detail-wrap {
    border: 1px solid #ccc;
    width: 100%;
    height: auto;
    padding: 10px;
    box-sizing: border-box;
    .order-content {
      border: 1px solid #ccc;
      padding: 10px;
      box-sizing: border-box;
    }
    /* tab切换部分 */
    .order-tab-container {
      margin-top: 10px;
      .goods-detail {
        margin-top: 10px;
        border: 1px solid #ccc;
        padding-bottom: 10px;
      }
    }
    .tab-title {
      text-align: left;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      height: 30px;
      line-height: 30px;
      font-weight: 600;
      font-size: 14px;
      padding-left: 20px;
      box-sizing: border-box;
    }
  }
  /* 返回按钮 */
  .back {
    margin-top: 20px;
  }
</style>
